Page({
  data: {
    pickerTitle: '年',
    showYearPicker: true,
    showMonthPicker: false,
    currentYear: '',
    currentMonth: '',
    dateRange: [],
    dateValue: [0, 0],
    chartData: {},
    opts: {},
    // 新增的圆环图数据
    ringChartOptions: {
      title: {
        name: '总上报事件数量',
        fontSize: 14,
        color: '#333333'
      },
      subtitle: {
        name: '25',
        fontSize: 18,
        color: '#333333'
      },
      extra: {
        ring: {
          radius: ['50%', '70%'],
          label: {
            show: true,
            fontSize: 12,
            formatter: '{name}\n{percentage}%',
            position: 'outside',
            color: '#666'
          }
        }
      }
    },
    ringChartData: {
      series: [
        {
          name: '事件数量',
          data: [
            { value: 16, name: '已处置' },
            { value: 5, name: '处置中' },
            { value: 4, name: '待处置' }
          ]
        }
      ]
    },

    // 新增的条状图数据
    barChartData: {
      categories: [],
      series: [{
        name: '消费',
        data: [],
      }],
    },
    barChartOptions: {
      yLabel: {
        show: true,
        name: '消费(元)'
      },
      xLabel: {
        show: true,
        name: '月份'
      },
    },
  },

  onLoad() {
    // 初始化年月范围
    const startYear = 2024;
    const endYear = new Date().getFullYear();
    let years = [];
    let months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
    for (let year = startYear; year <= endYear; year++) {
      years.push(year.toString());
    }
    this.setData({
      dateRange: [years, months],
      currentYear: years[0],
      currentMonth: months[0],
      dateValue: [0, 0]
    });
    this.getServerData(); // 页面加载时获取数据
    this.updateRingChartData(); // 初始化圆环图数据
    this.updateBarChartData(); // 初始化条状图数据
  },

  onShow() {
    this.getServerData();
    this.updateRingChartData(); // 页面显示时更新圆环图数据
    this.updateBarChartData(); // 页面显示时更新条状图数据
  },

  togglePicker() {
    this.setData({
      pickerTitle: this.data.pickerTitle === '年' ? '月' : '年',
      showYearPicker: !this.data.showYearPicker,
      showMonthPicker: !this.data.showMonthPicker,
    });
    this.getServerData(); // 切换选择器时重新获取数据
  },

  handleYearChange(e) {
    const years = this.data.dateRange[0];
    this.setData({
      currentYear: years[e.detail.value],
      dateValue: [e.detail.value, 0]
    });
    this.updateChartData(this.data.currentYear, this.data.currentMonth);
    this.updateRingChartData(); // 年份改变时更新圆环图数据
    this.updateBarChartData(); // 年份改变时更新条状图数据
  },

  handleMonthChange(e) {
    const months = this.data.dateRange[1];
    this.setData({
      currentMonth: months[e.detail.value],
      dateValue: [this.data.dateValue[0], e.detail.value]
    });
    this.updateChartData(this.data.currentYear, this.data.currentMonth);
    this.updateRingChartData(); // 月份改变时更新圆环图数据
    this.updateBarChartData(); // 月份改变时更新条状图数据
  },

  handleDateChange(e) {
    const [yearIndex, monthIndex] = e.detail.value;
    const years = this.data.dateRange[0];
    const months = this.data.dateRange[1];
    this.setData({
      currentYear: years[yearIndex],
      currentMonth: months[monthIndex],
      dateValue: [yearIndex, monthIndex]
    });
    this.updateChartData(years[yearIndex], months[monthIndex]);
    this.updateRingChartData(); // 日期改变时更新圆环图数据
    this.updateBarChartData(); // 日期改变时更新条状图数据
  },

  getServerData() {
    // 模拟从服务器获取数据
    setTimeout(() => {
      let chartData = {
        categories: ["2010", "2011", "2012", "2023", "2024"],
        series: [{
            name: "收入",
            data: [0, 0, 0, 0, 10000]
          },
          {
            name: "支出",
            data: [0, 0, 0, 0, 5000]
          }
        ]
      };
      this.setData({
        chartData,
      });
    }, 500);
  },

  updateChartData(year, month) {
    // 模拟根据年和月获取数据
    let chartData = {
      categories: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"],
      series: [{
          name: "收入",
          data: Array(12).fill(1000) // 假设每个月收入固定
        },
        {
          name: "支出",
          data: Array(12).fill(500) // 假设每个月支出固定
        }
      ]
    };
    this.setData({
      chartData,
    });
  },

  // 新增的更新圆环图数据的方法
  updateRingChartData() {
    // 确保 this.data.ringChartData.series[0].data 已经被初始化
    let total = this.data.ringChartData.series[0].data.reduce((acc, val) => acc + val.value, 0);
    
    // 定义新的系列数据
    let updatedSeriesData = [
      { value: 10000, name: '工资' },
      { value: 2000, name: '房租' },
      { value: 600, name: '转账' }
    ];
  
    // 在单个 setData 调用中更新系列数据和副标题
    this.setData({
      'ringChartData.series[0].data': updatedSeriesData, // 更新系列数据
      'ringChartOptions.subtitle.name': total.toString() // 更新副标题为总计数值
    });
  },

  // 新增的更新条状图数据的方法
  updateBarChartData() {
    const months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
    const data = months.map(() => Math.floor(Math.random() * 1000));
    this.setData({
      barChartData: {
        categories: months,
        series: [{
          name: '消费',
          data: data,
        }],
      },
    });
  }
});

